import React, { Component } from 'react'
import {Table,Button,Tag,MessageBox, Form,Select,Pagination, Message, Input} from "element-react";
export default class Repairpage extends Component {
    refresh = ()=>{
        fetch("/device/devicemanageinfo/list",{
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify({page:this.state.page.currentPage ,
                                status: 1})
        })
        .then(data=>data.json())
        .then(result=>{
            // result.page.list.map((e)=>{
            //     e.lable = value.label
            //     return e 
            // })
          this.setState({data:result.page.list , page :{
            total: result.page.totalPage,
            pageSize:  result.page.pageSize,
            currentPage: result.page.currPage,
          }
        })
        })
    }

    componentDidMount(){
        this.refresh()
        this.timer = setInterval(() => {
            this.refresh()
        }, 3000);
        }
        componentWillUnmount(){
        clearInterval(this.timer)
    }

    statusmap = {
        0 : {tag:"success" ,
             name:"在库"} , //在库
        1 : {tag:"danger",
              name :"维修中"} ,  // 维修中
        2 : { tag:"primary" ,
              name : "借出" } , //借出
        3 : {tag:"gray" ,
              name:"不可用"}, //不可用
        5 : {tag : "danger",
              name : "未入库"
        }
      }
    
    state = {
    columns: [
        {
        label: "设备编号",
        prop: "id",
        width: 200,
        fixed: 'left',
        align: 'center'
        },
        // {
        // label: "标签",
        // prop: "lable",
        // width: 160,
        // align: 'center'
        // },
        {
        label: "位置",
        prop: "location",
        align:"center",
        width: 400
        },
        {
        label: "状态",
        prop: "status",
        align: 'center',
        width: 100,
        render: (row, column, index)=>{
            return (
            <Tag
            type={this.statusmap[row.status].tag}
            >{this.statusmap[row.status].name}</Tag>
            )
        },
        },
        {
        label: "周期",
        prop: "period",
        width: 120,
        align: 'center'
        },
        {
        label: "操作",
        width: 240,
        fixed: 'right',
        render: (row, column, index)=>{
            return (
            <span style={{display:"flex"}}>
                <Button plain={true} type="info" size="small" onClick={this.alterRow.bind(this, index)}>维修审批</Button>
            </span>
            )

        },
        align: 'center'
        }
    ],
    data: [] ,
    page:{} ,
    currentnode:{},
    from :{
        location:"",
        period:"",
        status:"",
    }
    }

    alterRow(index) {    
    }


  render() {
    return (
        <div>
          <Table
          style={{width: '100%'}}
          columns={this.state.columns}
          data={this.state.data}
          stripe={true}
          />
          <div className="block" style={{}}>
            <Pagination layout="prev, pager, next" 
            pageCount={this.state.page.total} 
            pageSize={this.state.page.pageSize}
            currentPage={this.state.page.currentPage}
            onCurrentChange={this.pagechange}/>
          </div>
        </div>
      )
  }
}
